<template>
  <div class="big">
    <!-- 进入子页面 -->
    <div class="mb-4">
      <el-button type="primary" plain @click="gotoElBaseScrollbar"
        >滚动条</el-button
      >
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain @click="gotoElBase">基础框架</el-button>
    </div>
    <!-- router-view -->
    <div>
      <router-view></router-view>
    </div>
    <!-- 操作按钮 -->
    <div class="collect">
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
// 路由跳转
const router = useRouter()
const gotoElBaseScrollbar = () => router.push('/element/scrollbar')
const gotoElBase = () => router.push('/element/base')
</script>

<style lang="scss" scoped>
.big {
  position: relative;
  height: 100%;
  width: 100%;
}
.collect {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
</style>
